<template>
	<div>
		<!--头部搜索栏-->
		<top-sou></top-sou>
		<!--导航栏-->
		<div class="nav">
			<a href="#/ChunCai">默认</a>
			<a class="moren jiaxian">价格 <img class="shunxu" src="../assets/img/shouye/sousuo/6jia.png" alt=""/></a>
			<a href="###">销量</a>
			<a href="###">筛选</a>
		</div>
		<!--价格高低-->
		<div class="jiagd">
			<a href="#/JiaGeG">价格由高到低</a>
			<a class="di" href="#/JiaGeD">价格由低到高</a>
		</div>
		<!--商品-->
		<div v-for="bb in 8" class="gloss">
			<!--左图片-->
			<div class="glossLeft">
				<img src="../assets/img/shouye/tuijian/chuncai.png" alt=""/>
			</div>
			<!--右内容-->
			<div class="glossRight">
				<!--标题-->
				<p class="biaogloss">
					焕彩萃璨花蕊唇彩4.8g
				</p>
				<!--介绍-->
				<p class="jiegloss">
					焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g
				</p>
				<!--图片-->
				<div class="imggloss">
					<img class="guoqi" src="../assets/img/shouye/sousuo/6tuo.png" alt=""/>
					<img class="huiji" src="../assets/img/duanhuowang/hui.png" alt=""/>
					<span class="hai">海外直邮</span>
					<span class="money">￥199.06</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		methods:{
			jia:function(){
					//价格选项出现
				var flag = false;
				$(".jiaxian").click(function() {
					if(flag == false) {
						$(".jiagd").css("display", "none");
						flag = true;
					} else if(flag == true) {
						$(".jiagd").css("display", "block");
						flag = false;
					}
				});
			}
		},
		mounted:function(){
			this.jia();
		},
		components: {
			TopSou,
			ShangpinDaohang
		}
	}
	import TopSou from '@/components/TopSou'
	import ShangpinDaohang from '@/components/ShangpinDaohang'
</script>

<style>
		/*价格*/
	
	.jiagd {
		width: 100%;
		position: absolute;
		top: 17rem;
		left: 0;
		background: whitesmoke;
		display: none;
	}
	
	.jiagd>a {
		display: block;
		width: 100%;
		height: 11rem;
		line-height: 11rem;
		border-bottom: 0.01rem solid #808080;
		font-size: 2.8rem;
		padding-left: 2rem;
		box-sizing: border-box;
	}
	
	.di {
		border-bottom: none;
	}
	
</style>